<template>
  <div>
    <h2>Vue生命周期函数示例</h2>
    <p>当前值：{{ e1 }}</p>
    <el-button @click="e1 = '更新后的值'">更新值</el-button>
    <el-button @click="show = !show">{{ show ? '隐藏' : '显示' }}组件</el-button>
    
    <div v-if="show" style="border: 1px solid #ccc; padding: 10px; margin: 10px 0;">
      <h3>子组件（用于测试组件卸载）</h3>
      <p>子组件内容</p>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { useHead } from '@vueuse/head';

  useHead({
    title: 'Vue周期函数',
    meta: [
      { name: 'description', content: 'Vue周期函数' }
    ]
  });  
  //  在 <script setup> 或 setup() 中使用，需从 vue 中导入
  // beforeCreate===>setup()
  // created===>setup()
  // beforeMount===>onBeforeMount
  // mounted===>onMounted
  // beforeUpdate===>onBeforeUpdate
  // updated===>onUpdated
  // beforeUnmount===>onBeforeUnmount
  // unmounted===>onUnmounted

  import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
    onErrorCaptured,
    onRenderTracked,
    onRenderTriggered
  } from 'vue'
  const e1 = ref('hello vue');
  const show = ref(true);
  onBeforeMount(() => {
    console.log('组件挂载前')
    console.log(e1.value);
  })
  onMounted(() => {
    console.log('组件挂载完成')
    console.log(e1.value);
  })
  onBeforeUpdate(() => {
    console.log('组件更新前')
  })
  onUpdated(() => {
    console.log('组件更新完成')
  })
  onBeforeUnmount(() => {
    console.log('组件卸载前')
  })
  onUnmounted(() => {
    console.log('组件卸载完成')
  })
</script>
<style scoped>

</style>